<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./src/css/public.css">
    <link rel="stylesheet" href="./src/css/buycar01.css">
</head>

<body>
    <div class="head">
        <div class="navbar">
            <div class="navbar-header">
                <a href="file:///C:/%E5%8D%83%E5%B3%B0%E6%95%99%E8%82%B2/%E4%BA%8C%E9%98%B6%E6%AE%B52/demo1/src/firstpage.html">
                    <div class="logo"></div>
                </a>
                <div class="dropdown">
                    <li class="li1">
                        <a href="">所有商品</a>
                        <div class="panel-collapse">
                            <div class="allshoping">
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="li1"><a href="">篮球</a>
                        <div class="panel-collapse">
                            <div class="allshoping">
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                        <li><a href="">运动鞋</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="li1"><a href="">跑步</a>
                        <div class="panel-collapse">
                            <div class="allshoping">
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                        <li><a href="">板鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                                <div class="sdw-pc">
                                    <a href="">男鞋</a>
                                    <ul>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                        <li><a href="">篮球鞋</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="li1"><a href="">新品</a></li>
                    <li class="li1"><a href="">企业团购</a></li>
                    <li class="li1"><a href="">大码鞋</a></li>
                    <li class="li1"><a href="">态极</a></li>
                    <li class="li1"><a href="">秒杀</a></li>
                </div>
                <div class="nav-wrapper">
                    <span class="sp1"><a href="file:///C:/%E5%8D%83%E5%B3%B0%E6%95%99%E8%82%B2/%E4%BA%8C%E9%98%B6%E6%AE%B52/demo1/src/login.html">请登录</a><span style="float: left;">|</span></span>
                    <span class="sp1"><a href="">购物车(0)</a><span style="float: left;">|</span></span>
                    <span class="sp1"><a href="">我的订单</a><span style="float: left;">|</span></span>
                    <span class="sp1"><a href="">网站导航</a><span style="float: left;">|</span></span>
                    <span class="sp1"><a href="">联系客服</a><span style="float: left;">|</span></span>
                    <span class="sp1 spn1"><a href=""><img src="./img/icon_phone.png">手机版</a>
                        <div class="nav-wrapper-phone"><img src="./img/m_epeaksport.jpg" alt=""></div>
                    </span>
                </div>
                <div class="search"> <input type="text"><span class="searchimg"></span></div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="location">
            <p class="p1">您当前所在的位置:&nbsp;&nbsp;首页 ></p><p class="p2">我的购物车</p>
        </div>
        <div class="buycar">
            <div class="car">我的购物车</div>
            <div class="write">填写订单</div>
            <div class="pay">订单支付</div>
        </div>
        <table class="table">
            <caption>购物车</caption>
            <thead> 
                <tr>
                    <th>序号</th>
                    <th>品名</th>
                    <th>单价</th>
                    <th>尺码</th>
                    <th>数量</th>
                </tr>
            </thead>
            <colgroup>
           <col width="50" />
           <col width="250" />
           <col width="70" />
           <col width="60" />
           <col width="70" />
         </colgroup>
            <tbody id="table">
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
            </tbody>
       </table>
        <div class="remind">
            <p class="p1">温馨提示:&nbsp;&nbsp;</p><p class="p2">产品是否购买成功,以最终下单为准哦,请尽快结算</p>
        </div>
    </div>
    <script>
        var otab=document.querySelector("#table")
        var locallist=JSON.parse(localStorage.getItem('name')||'[]');
        var str=``;
        locallist.forEach(function(item){
            str+=`
                <tr>
                    <th>${item.id}</th>
                    <th>${item.name}</th>
                    <th>${item.price}</th>
                    <th>${item.size}</th>
                    <th>${item.Num}</th>
                </tr>
            `
        });
        otab.innerHTML=str;
    </script>
</body>